//out: ../css/
@import './base.less';

@vw:3.75vw;
body {
    background-color: #f9fafb;
}
//头部
header{
    width: 100%;
    height: (50/@vw);
    position: fixed;
    left: 0;
    top: 0;
    background-color: aqua;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15/@vw);
    .left{
        width: (235/@vw);
        height: (50/@vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    a{
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        text-align: center;
        line-height: (30/@vw);
        border-radius: (15/@vw);
    }
}

// 搜索
.search {
    // 头部固定定位，脱标不占位，搜索去最顶了，加上外边距挤下来即可
    margin-top: (50 / @vw);
    padding: (10 / @vw) (15 / @vw);
    height: (52 / @vw);

    // background-color: pink;
    .txt {
        height: (32 / @vw);
        background-color: #f2f4f5;
        border-radius: (16 / @vw);
        text-align: center;
        line-height: (32 / @vw);
        color: #a1a4b3;
        font-size: (14 / @vw);

        .iconfont {
            font-size: (16 / @vw);
        }
    }
}

// banner
.banner{
    padding: 0 (15/@vw);
    margin-top: (15/@vw);
    height: (108/@vw);
    a {
        width: (345/@vw);
        height: (108/@vw);
        img{
            width: 100%;
            height: 100%;
            border-radius: (10/@vw);
        }
    }
}

// 排行
.rank{
    height: (26/@vw);
}

.rank .title{
    height: 100%;
    margin: (15/@vw);
    display: flex;
    justify-content: space-between;
}

.title h1{
    font-size: 18px;
}


.title h4{
    align-self: center;
    transform: translateX(380%);
    color: #ccc;
}

.title span{
    align-self: center;
    color: #ccc;
}

// 热歌
.hotsong{
    display: flex;
    // justify-content: space-between;
    margin: (15/@vw);
    width: (345/@vw);
    height: (105/@vw);
        img{
            width: (105/@vw);
            height: (105/@vw);
            border-radius: (10/@vw);
            margin-right: (16/@vw);
        }
    .songlist{
        position: relative;
         height: (105/@vw);
        .title{
            font-size: 16px;
            position: absolute;
            left: -15px;
            top: -10px;
            display: flex;
            justify-content:left;
            height: (18/@vw);
        }

        .songname{
            color: #b6adce;
            margin: (7/@vw) 0;
            font-size: 13px;
            transform: translateY(40%);
        }
    }
}

// 新歌
.newsong {
    display: flex;
    // justify-content: space-between;
    margin: (15/@vw);
    width: (345/@vw);
    height: (105/@vw);

    img {
        width: (105/@vw);
        height: (105/@vw);
        border-radius: (10/@vw);
        margin-right: (16/@vw);
    }

    .songlist {
        position: relative;
        height: (105/@vw);

        .title {
            font-size: 16px;
            position: absolute;
            left: -15px;
            top: -10px;
            display: flex;
            justify-content: left;
            height: (18/@vw);
        }

        .songname {
            color: #b6adce;
            margin: (7/@vw) 0;
            font-size: 13px;
            transform: translateY(40%);
        }
    }
}

//飙升榜
.risesong {
    display: flex;
    // justify-content: space-between;
    margin: (15/@vw);
    width: (345/@vw);
    height: (105/@vw);

    img {
        width: (105/@vw);
        height: (105/@vw);
        border-radius: (10/@vw);
        margin-right: (16/@vw);
    }

    .songlist {
        position: relative;
        height: (105/@vw);

        .title {
            font-size: 16px;
            position: absolute;
            left: -15px;
            top: -10px;
            display: flex;
            justify-content: left;
            height: (18/@vw);
        }

        .songname {
            color: #b6adce;
            margin: (7/@vw) 0;
            font-size: 13px;
            transform: translateY(40%);
        }
    }
}



// 推荐
.recommend {
    padding: 0 (15 / @vw);
    .title{
        width: 100%;
        display: flex;
        // justify-content: space-between;
        h4{
            transform: translateX(-15px);
        }
        a{
            transform: translateX(-15px);
        }
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            margin-bottom: (16 / @vw);
            width: (105 / @vw);
            height: (143 / @vw);

            // background-color: pink;
            // 图片
            .pic {
                position: relative;
                width: (105 / @vw);
                height: (105 / @vw);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10 / @vw);
                }

                .cover {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: (70 / @vw);
                    height: (28 / @vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10 / @vw) 0 (10 / @vw);
                    text-align: center;
                    line-height: (28 / @vw);
                    color: #fff;
                    font-size: (12 / @vw);
                }
            }

            // 文字
            .txt {
                font-size: (14 / @vw);
            }
        }
    }
}


//下载
.float {
    position: fixed;
    left: (15 / @vw);
    bottom: (30 / @vw);

    display: flex;
    align-items: center;
    padding: 0 (10 / @vw) 0 (15 / @vw);
    width: (345 / @vw);
    height: (45 / @vw);
    background-color: #fff;
    border-radius: (22 / @vw);

    img {
        margin-right: (10 / @vw);
        width: (36 / @vw);
        height: (36 / @vw);
    }

    p {
        flex: 1;
        font-size: (14 / @vw);
    }

    span {
        width: (32 / @vw);
        height: (32 / @vw);
        background-color: #f2f3f5;
        border-radius: 50%;
        text-align: center;
        line-height: (32 / @vw);
        font-size: (16 / @vw);
    }
}